<template>
  <div class="w-full mt-4 text-base bg-white">
    <div class="flex h-[50px]">
      <div
        class="box-border flex items-center justify-center flex-1 text-center border bg_table_header"
      >
        油品种类
      </div>
      <div
        class="box-border flex items-center justify-center w-40 text-center topBorder bottomBorder rightBorder bg_table_header"
      >
        批次输量(m³/h)
      </div>
      <div
        class="box-border flex items-center justify-center w-40 text-center topBorder bottomBorder rightBorder bg_table_header"
      >
        批次温度(℃)
      </div>
      <div
        class="box-border flex items-center justify-center w-40 text-center topBorder bottomBorder rightBorder bg_table_header"
      >
        输送时长(h)
      </div>
    </div>
    <div class="flex h-[40px] shadow-md">
      <div class="flex items-center flex-1 px-5 bottomBorder rightBorder leftBorder2">
        <el-select v-model="oilType1" placeholder="请选择油品种类">
          <el-option
            v-for="item in oilList"
            :key="item.id"
            :label="item.chinese_name"
            :value="item.oils_name"
          />
        </el-select>
      </div>
      <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
        <el-input v-model="oilFlow1" class="no-style-input !text-base" />
      </div>
      <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
        <el-input v-model="oilTemperature1" class="no-style-input !text-base" />
      </div>
      <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
        <el-input v-model="oilDuration1" class="no-style-input !text-base" />
      </div>
    </div>
    <div class="flex h-[40px] shadow-md">
      <div class="flex items-center flex-1 px-5 bottomBorder rightBorder leftBorder2">
        <el-select v-model="oilType2" placeholder="请选择油品种类">
          <el-option
            v-for="item in oilList"
            :key="item.id"
            :label="item.chinese_name"
            :value="item.oils_name"
          />
        </el-select>
      </div>
      <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
        <el-input v-model="oilFlow2" class="no-style-input !text-base" />
      </div>
      <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
        <el-input v-model="oilTemperature2" class="no-style-input !text-base" />
      </div>
      <div class="box-border flex items-center w-40 px-5 rightBorder bottomBorder">
        <el-input v-model="oilDuration2" class="no-style-input !text-base" />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oilList: { type: Array }
})
// 响应式数据
const oilType1 = defineModel('oilType1')
const oilType2 = defineModel('oilType2')
const oilFlow1 = ref('300')
const oilFlow2 = ref('260')
const oilTemperature1 = ref('30')
const oilTemperature2 = ref('35')
const oilDuration1 = ref('7')
const oilDuration2 = ref('5')

const validateSettings = () => {
  const initialFields = [
    { value: oilType1.value, name: '第一批次油品种类' },
    { value: oilFlow1.value, name: '第一批次输量' },
    { value: oilTemperature1.value, name: '第一批次温度' },
    { value: oilDuration1.value, name: '第一批次输送时长' },
    { value: oilType2.value, name: '第二批次油品种类' },
    { value: oilFlow2.value, name: '第二批次输量' },
    { value: oilTemperature2.value, name: '第二批次温度' },
    { value: oilDuration2.value, name: '第二批次输送时长' }
  ]

  for (const field of initialFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  const initialFields = [
    oilType1.value,
    oilFlow1.value,
    oilTemperature1.value,
    oilDuration1.value,
    oilType2.value,
    oilFlow2.value,
    oilTemperature2.value,
    oilDuration2.value
  ]
  if (!initialFields.every((field) => field)) return false
  return true
})

const getParamsData = () => {
  return {
    Oil_in1: oilType1.value,
    Oil_in2: oilType2.value,
    T_IN1: oilDuration1.value,
    T_IN2: oilDuration2.value,
    Q_IN1: oilFlow1.value,
    Q_IN2: oilFlow2.value,
    TEM_1: oilTemperature1.value,
    TEM_2: oilTemperature2.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}
</style>
